<template>
  <div :style="goodstyle">
    <div class="swiper decorate" :style="'height:'+height+'px;'+itemstyle">
      <el-carousel indicator-position="none" @change="changesilde">
        <el-carousel-item v-for="(item,i) in data.imglist" :key="i">
          <vimage :src="item.url" v-if="item.url" ></vimage>
          <img src="@/assets/images/banner.jpg" v-else />
        </el-carousel-item>
      </el-carousel>
      <div>
        <ul v-if="data.type==1" class='dots rectangle' :style="'justify-content:'+data.position ">
          <li v-for="(item,i) in data.imglist" :key="i" :class="activeIndex == i? 'dot active':'dot'" :style="'background:'+data.bg"></li>
        </ul>
        <ul v-if="data.type==2" class='dots round' :style="'justify-content:'+data.position ">
          <li v-for="(item,i) in data.imglist" :key="i" :class="activeIndex == i? 'dot active':'dot'" :style="'background:'+data.bg"></li>
        </ul>
        <p v-if="data.type==3" :class="'number '+data.position"> {{activeIndex+1}}/{{data.imglist.length}} </p>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    getImageInfo
  } from "@/utils/index"
  export default {
    props: {
      data: {
        type: Object,
        default: {

        }
      }
    },

    computed: {
      itemstyle() {
        return "border-radius:" + this.data.r_t / 2 + "px " + this.data.r_t / 2 + "px " +
          this.data.r_b / 2 + "px " + this.data.r_b / 2 + "px "
      },
      goodstyle() {
        return "padding: " + this.data.p_t / 2 + "px " + this.data.p_lr / 2 + "px " + this.data.p_b / 2 + "px";
      },

    },
    data() {
      const _this = this
      return {
        activeIndex: 0,
        height: '375',
      }
    },
    methods: {
      changesilde(a, b) {
        this.activeIndex = a
      }

    },
    mounted() {
      // getImageInfo()
    }


  }
</script>
<style>
  .el-carousel {
    height: 100% !important;

  }

  .el-carousel__container {
    height: 100% !important;

  }
</style>
<style lang="scss" scoped>
  .swiper {
    overflow: hidden;

    img {
      width: 100%;
      display: block;
      height: 100%;
    }

    .dots {
      position: absolute;
      display: flex;
      bottom: 9.77199px;
      box-sizing: border-box;
      padding: 0 14.65798px;
      left: 0;
      right: 0;
      justify-content: center;
      z-index: 1000;

      .dot {
        width: 6px;
        height: 6px;
        background: #fff;
        margin: 0 3px;
        opacity: 0.54;

        &.active {
          opacity: 1;
        }

      }

      &.round {
        .dot {
          border-radius: 50%;
        }
      }

      &.rectangle {
        .dot {
          width: 8px;
          height: 4px;
          border-radius: 4px;
          margin: 0 3px;
        }
      }
    }

    .number {
      position: absolute;
      display: flex;
      bottom: 9.77199px;
      box-sizing: border-box;
      justify-content: center;
      color: #fff;
      background: rgba(0, 0, 0, 0.54);
      border-radius: 22px;
      flex-direction: column;
      flex-direction: column;
      text-align: center;
      width: fit-content;
      min-width: 60rpx;
      font-size: 9px;
      line-height: 9px;
      padding: 3px 5px;
      right: 12px;
      z-index: 1000;

      &.flex-start {
        left: 12px;
      }

      &.flex-end {
        right: 12px;
      }
    }
  }
</style>
